<template>
	<view>
		<!-- <scroll-view scroll-y="true"> -->
			<view class="list">
				<view class="list-item">
					<text style="color: red;">*</text>
					<text>业主姓名：</text>
					<input type="text" placeholder="请输入姓名" v-model="params['联系人姓名']">
				</view>
				<view class="list-item">
					<text style="color: red;">*</text>
					<text>联系电话：</text>
					<input type="number" placeholder="请输入电话号码" v-model="params['联系人电话']">
				</view>
				<view class="list-item">
					<text style="color: red;">*</text>
					<text>安装地址：</text>
					<input type="text" placeholder="请输入地址" v-model="params['报事位置']">
				</view>
				<view class="list-item">
					<text style="color: #fff;">*</text>
					<text>上门时间：</text>
					<my-picker ref="picker" :value="time" @input="pickerchange" />
				</view>
				<view class="list-item">
					<text style="color: red;">*</text>
					<text>所属小区：</text>
					<text>{{userInfo.projName}}</text>
					<!-- <input type="text" placeholder="请输入装修地址"> -->
					<!-- <view class="type" @click="handleTap('picker')">{{label}}</view>
					<lb-picker ref="picker" v-model="value" mode="selector" :list="projectList" :dataset="{ name: 'label' }"
					 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker> -->
				</view>
				<view style="border-bottom: 2rpx solid #f5f5f5;padding-bottom: 16rpx;">
					<textarea class="text" fixed value="" placeholder="请输入报事描述..." v-model="params['报事描述']" />
					<uploader ref="uploader" @input='onchange' />
				</view>
				<!-- <textarea fixed class="text" value="" placeholder="请描述您遇到的问题...如2幢1单元门禁机无法识别" v-model="params['报事描述']" />
				<uploader ref="uploader" @input='onchange' /> -->
				<button class="btn install" style="margin-top: 100rpx;" @click="handleSubmit">提交</button>
			</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker/index.vue'
	import dyDatetimePicker from '@/components/lanxiujuan-dyDateTime/lanxiujuan-dyDateTime'
	import uploader from '@/myComponents/image-uploader.vue'
	import myPicker from '@/myComponents/time-picker.vue'
	export default {
		components: {
			LbPicker,
			dyDatetimePicker,
			uploader,
			myPicker
		},
		props: {
			projectList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				value: '',
				label: '',
				params: {
					机构id: this.$config.groupId,
					来源:6,
					操作类型: 'submit',
					工单类型: 'E',
					联系人姓名: '',
					联系人电话: '',
					报事描述: '',
					报事位置: '',
					上门时间: '',
					所属项目id: null,
					报事附件: []
				},
				file: {
					fileData: null,
					fileName: null
				},
				chooseImg: [],
				time: '请选择上门时间',
				userInfo: {}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.params.联系人姓名 = this.userInfo.name
			this.params.所属项目id = this.userInfo.projId
			this.params.联系人电话 = this.userInfo.mobile
		},
		methods: {
			pickerchange(e){
				this.time = e
				this.params.上门时间 = e
				// console.log(this.$refs.picker)
				// console.log('pickerchangeid',e);
			},
			onchange(e) {
				this.params.报事附件 = e
				// console.log(e)
			},
			getData(time) {
				this.params.上门时间 = time
				console.log(time)
			},
			handleCancel(e) {
				uni.showTabBar({
					animation: true
				})
				console.log('cancel::', e)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					// this.params.所属项目id = e.item.id
					this.params.所属项目id = e.item.id
					// this.params2.所属项目id = e.item.id
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleConfirm1(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					// this.params.所属项目id = e.item.id
					this.params.所属项目id = e.item.id
					// this.params2.所属项目id = e.item.id
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleSubmit() {
				if(this.params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写业主姓名',
						icon: 'none'
					})
				}else if(this.params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(/^1[3456789]\d{9}$/.test(this.params.联系人电话) === false){
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					})
				}else if(this.params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写安装地址',
						icon: 'none'
					})
				}else {
					this.createTicket()
				}
			},
			createTicket() {
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.$http2.post('ticketSystem/ticket/submit', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.redirectTo({
							url: '../success/success?path=../index/index' + '&title=返回报事页面'
						})
					}
				})
			}
		}
	}
</script>

<style>

</style>
